<template>
  <el-dialog v-dialog-drag
             class="login_dialog"
             title="请登录"
             :visible.sync="isShowPop"
             width="400px"
             center>
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="60px" class="login_form">
      <el-form-item prop="username" label="账号">
        <el-input v-model="formData.username">
        </el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input type="password" v-model="formData.password"></el-input>
      </el-form-item>
      <el-form-item style="text-align: right">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { reqLogin } from '@/api/clientApi'
import dialogMixin from '@/mixins/dialogMixin'

export default {
  mixins: [dialogMixin],
  data() {
    return {
      formData: {
        username: '',
        password: ''
      },
      formRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 10, message: "长度在2-10个字符之间" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 1, max: 18, message: "长度在 1 到 18 个字符", trigger: "blur" }
        ]
      },
    }
  },
  methods: {
    refresh() {
      this.$nextTick(()=>{
        this.$refs.formRef.resetFields()
      })

    },
    /**
     *  用户登录
     */
    handleSubmit() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return;
        reqLogin(this.formData).then(data => {
          this.$store.dispatch('user/loginWithUserInfo', data)
          this.$message.success('登录成功')
          this.isShowPop = false
        });
      })
    },
  }
}
</script>

<style lang="less" scoped>

.login_form {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: flex-end;
}

.login_dialog {
  opacity: 1;
}

</style>
